Headless WordPress: Notices System

In the previous tutorial, we have created a form to update user settings. The only problem we had here is that we did not know if the user settings were updated or not. Let’s learn how to use the Notices system from Gutenberg in our headless WordPress application.

This tutorial will follow the code from the past two tutorials:

1. https://www.ibenic.com/headless-wordpress-logging-with-jwt/
2. https://www.ibenic.com/headless-wordpress-updating-user-settings/

If you have not done them, be sure to go over them so you can understand where we continue from.

To be able to use and recreate the notices system from Gutenberg, we need to perform some new npm install calls. Be sure you are still in the main app folder (where package.json is) and perform this calls.

For Notices:

npm install @wordpress/notices

We will also create a new component to show notices. We will filter the notices using the lodash so make sure to have that installed as well.

npm install lodash

And in case you don’t have some HOC Gutenberg helper components from the compose package, make sure you have it by calling this:

npm install @wordpress/compose

Since the Notices store is using the @wordpress/data package, we need that also to access them in an easy manner, so let’s install that as well.

npm install @wordpress/data

Now, we’re ready to start.

Adding Notices Store

To add the notices store, open your main App.js file and add this:

We have imported the AppNotices (we will make that right now), and the notices store. Then, we are displaying the AppNotices component at the top of our App.

We the Notices store imported here, we have it registered and can access them from the store.

Displaying Notices

We will now create the component AppNotices that will be used to display the notices that are stored in our core/notices store.

Create the file AppNotices.js inside of src/components and add this:

Those are all the dependencies that we need for this component. Then, let’s create the base component.

This is filtering the notices by their type. We will receive those notices from the store. For rendering the notices, we are using the components NoticeList and SnackbarList.

We are then exporting our component wrapped with the compose. That’s a helper wrapper to access data from the store. In here, we are getting all the notices stored in the store core/notices. And to remove the notices, we are calling the method removeNotice that is a registered method in the notices store.

Notices Functions

To add new notices (to display them), we would need to call methods such as this:

dispatch( 'core/notices' ).createSuccessNotice( message, {
   id: id,
   type: noticeType,
 } ); 

That can be a cumbersome thing to do for every custom notice we have. So, let’s create helper functions. Create a folder src/functions and add the file notices.js. Now, add this:

We are importing the dispatch function from the package @wordpress/data so we can access the store. Then, we are using the function addNotice to add the appropriate notice. The only difference here will be the colors of the notices.

We have also created a method addSnackbar. This notice does not have a styling as it is always the same, so we are using another helper method.

Let’s now use that function to notify when the settings are updated.

Using Notices functions

Open the component Settings.js that we’ve created in the previous tutorial. And add this lines:

We are importing the addSnackbar function here and call it when the user has updated its settings.

The snackbar will not display correctly, so let’s update our App.scss.

Code

The code here is the full version up to this tutorial. It is without any node modules, so you’ll have to run npm install to get every dependency we need.

Conclusion

By using already made stores from Gutenberg, we can achieve the same functionality but with much less code to write or maintain.

Become a Sponsor